@import 'base.less';


.tableCell-hover {
  background-color: @hoverBackColor
}

.color_type_class(@key, @v) {

  .switch_@{key}>.el-switch__label {
    color: @v;
  }

  .switch_@{key}_active>.el-switch__label.is-active {
    color: @v;
  }

  .switch_@{key}_right>.el-switch__label.el-switch__label--right {
    color: @v;
  }

  .switch_@{key}_left>.el-switch__label.el-switch__label--left {
    color: @v;
  }

  .color_@{key} {
    color: @v;
  }

  .el-table .color_@{key}>.cell {
    color: @v;
  }

  .back_@{key} {
    background-color: @v;
  }

  .border_@{key} {
    border-color: @v;
  }

  .border_item_@{key} .el-input__inner,
  .border_item_@{key} .el-input__inner:focus,
  .border_item_@{key} .el-textarea__inner,
  .border_item_@{key} .el-textarea__inner:focus,
  .border_item_@{key} input.invalid,
  .border_item_@{key} input.invalid:focus {
    border-color: @v;
  }

  .el-table>.back_@{key} {
    background-color: @v;
  }

  .back_@{key}_light {
    background-color: lighten(@v, 25%); //mix(transparent, @value, 50%);
  }

  .back_@{key}_light2 {
    background-color: lighten(@v, 35%); //mix(transparent, @value, 50%);
  }

  .el-table {
    tr.back_@{key}_light {
      background-color: lighten(@v, 35%); //mix(transparent, @value, 50%);
    }

    .el-table__body tr.back_@{key}_light_hover:hover>td.el-table__cell {
      background-color: lighten(@v, 30%);
    }

    tr.back_@{key}_light2 {
      background-color: lighten(@v, 35%); //mix(transparent, @value, 50%);
    }

    .el-table__body tr.back_@{key}_light2_hover:hover>td.el-table__cell {
      background-color: lighten(@v, 30%);
    }
  }

  .el-table__row>.tableCell_@{key} {
    background-color: @v;
  }

  .el-table--enable-row-hover .el-table__body tr:hover>td.tableCell_@{key} {
    background-color: @v;
  }

  .button_text_@{key} {
    color: @v;

    &:hover,
    &:focus {
      color: lighten(@v, 15%);
    }
  }

  .tag_@{key} {
    // background-color: #ecf5ff;
    border-color: @v;
    color: @v;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    padding: 5px;
  }

  .tag_@{key}_fill {
    background-color: @v;
    border-color: @v;
    color: #fff;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    padding: 5px;
  }

}

.loop_color_type_class(@i) when(@i < length(@colorTypes) + 1) {
  @obj : extract(@colorTypes, @i);
  .color_type_class(@obj[key], @obj[value]);
  .loop_color_type_class(@i+1);
}

.loop_color_type_class(1);


.icon-small {
  font-size: 25px;
}

.margin-small {
  margin: 10px 20px
}

.flex_center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex_col {
  display: flex;
  flex-direction: column;
}

.flex_row {
  display: flex;
  flex-direction: row;

}

.flex_row_center {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.flex_col_center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flex_row_start {
  display: flex;
  flex-direction: row;
  align-items: start;
}

.flex_align_center {
  align-items: center;
}

.flex_justify_sb {
  justify-content: space-between;
}

.flex_justify_sa {
  justify-content: space-around;
}

.flex_justify_center {
  justify-content: center;
}

.flex_row_wrap {
  display: flex;
  flex-flow: row wrap;
}

.inline_block {
  display: inline-block;
}

.flex_row_wrap_center {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}

.flex_row_wrap_start {
  display: flex;
  flex-flow: row wrap;
  align-items: start;
}


.flex_auto {
  flex: 1 1 0;
}

.flex_cell {
  flex: 1;
}

.flex_cell2 {
  flex: 2;
}

.flex_cell3 {
  flex: 3;
}

.flex_cell4 {
  flex: 4;
}

.normal_shadow {
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}

.card {
  background-color: white;
  border-radius: 10px;
  padding: 10px;
  .normal_shadow();
}

.el-tab-pane {
  display: flex;
  flex-direction: column;
}



.form-line {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.h_fill {
  height: 100%;
}

.w_fill {
  width: 100%;
}

.el-date-editor.el-input.w_fill {
  width: 100%;
}


.widthdiv1 {
  .w_fill();
}

@litterUnit: 0.5rem;

.loop_sample_range(@i) when(@i < 4) {
  .mg_t@{i} {
    margin-top: @litterUnit*@i;
  }

  .mg_b@{i} {
    margin-bottom: @litterUnit*@i;
  }

  .mg_r@{i} {
    margin-right: @litterUnit*@i;
  }

  .mg_l@{i} {
    margin-left: @litterUnit*@i;
  }

  .mg_v@{i} {
    margin-top: @litterUnit*@i;
    margin-bottom: @litterUnit*@i;
  }

  .mg_h@{i} {
    margin-left: @litterUnit*@i;
    margin-right: @litterUnit*@i;
  }

  .mg_@{i} {
    margin: @litterUnit*@i;
  }

  .pd_t@{i} {
    padding-top: @litterUnit*@i;
  }

  .pd_b@{i} {
    padding-bottom: @litterUnit*@i;
  }

  .pd_r@{i} {
    padding-right: @litterUnit*@i;
  }

  .pd_l@{i} {
    padding-left: @litterUnit*@i;
  }

  .pd_v@{i} {
    padding-top: @litterUnit*@i;
    padding-bottom: @litterUnit*@i;
  }

  .pd_h@{i} {
    padding-left: @litterUnit*@i;
    padding-right: @litterUnit*@i;
  }

  .pd_@{i} {
    padding: @litterUnit*@i;
  }

  .radius_@{i} {
    border-radius: @litterUnit*@i;
  }

  .card_@{i} {
    background-color: white;
    border-radius: @litterUnit*@i;
    padding: @litterUnit*@i;
    .normal_shadow();
  }

  .loop_sample_range(@i+1);
}

.loop_sample_range(1);

.over_auto {
  overflow: auto;
}



each(range(16), {
  .widthdiv@{value} {
    width: (100%/@value);
  }

  .widthdiv@{value}_ {
    width: calc(100%/@value - 0.5%);
  }

  .widthdiv@{value}form {
    width: calc(100%/@value - 11px);
  }
});

.page_base {
  height: 100%;
  box-sizing: border-box;
  .normal_shadow();
  background-color: white;
  flex: 1;
  display: flex;
  flex-direction: column;

}

.scroll_auto {
  overflow: auto
}

.page_base_bottom_button {
  padding-left: 20px;
  padding-top: 10px;
  padding-bottom: 10px;

  background-color: #fff;
  width: 100%;
  z-index: 1000;
}

.page_rela_container {
  position: relative;
  .normal_shadow();
  background-color: white;
  // border-radius: 1rem;
  padding: 12px;
  margin: 12px;

  // margin: 0.5rem;
  height: calc(100% - 24px);
  flex: 1;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.page_rela_bottom {}

.page_rela_bottom_area {

  padding-top: 12px;
  background-color: white;
  z-index: 50;
  border-top: 1px solid #EBEEF5;
}

.page-container {

  .normal_shadow();
  background-color: white;
  // border-radius: 1rem;
  padding: 12px;
  margin: 12px;

  // margin: 0.5rem;
  height: calc(100% - 24px);
  flex: 1;
  display: flex;
  flex-direction: column;
  /* overflow: scroll; */

  overflow: auto;
  // height: 100%;
  box-sizing: border-box;
}

.form-container {
  .normal_shadow();
  background-color: white;
  padding: 20px;

  flex: 1;

  overflow-y: scroll;
  height: 100%;
  box-sizing: border-box;
}

.common-form-panel-div {
  padding: 0px 20px 10px 20px;
  // overflow-x: auto;
}

.common-form-panel-div .el-row .el-col {
  width: 400px;
}

.common-form-panel-div .el-row .el-col-2 {
  width: 800px;
}

.common-form-panel-div .el-row .el-col-3 {
  width: 1200px;
}

.common-form-panel-div .static-col {
  width: 400px;
}

.common-form-panel-div .static-col-2 {
  width: 800px;
}

.common-form-panel-div .static-col-3 {
  width: 1200px;
}

.common-form-panel-div-right>.el-row>.el-col {
  margin-right: 20px;
}

.common-form-row>.el-row>.el-col {
  width: 400px;
}

.common-form-row>.el-row>.el-col-2 {
  width: 800px;
}

.common-form-row>.el-row>.el-col-3 {
  width: 1200px;
}

.standard_form_gird_right>.el-row>.el-col {
  margin-right: 20px;
}

.standard_form_gird>.el-row>.el-col {
  width: 400px;
}

.standard_form_gird>.el-row>.el-col-2 {
  width: 800px;
}

.standard_form_gird>.el-row>.el-col-3 {
  width: 1200px;
}


.el-input--small {
  font-size: 14px;
}

.input-align-right input {
  text-align: right;
}

.input-align-center input {
  text-align: center;
}



.el-tooltip__popper {
  font-size: 14px;
}


.el-table .cell {
  font-size: 14px;
  color: #606266;
}

.el-table thead th {
  //background-color: #f6f6f6;
  color: #606266;
  //padding: 6px 0;
  font-weight: normal;
  //border-bottom: 1px solid #ebeef5;
}

.el-button span {
  //font-size: 14px;
}

.el-descriptions--mini,
.el-descriptions--small {
  font-size: 14px;
}

.el-button {
  font-weight: normal;
  // font-size: 13px;
  // color: #333;
}

.el-button--text span {
  font-size: 14px;
}

.el-radio-group {
  //margin-top: -2px;
}

.el-radio-button--small .el-radio-button__inner {
  padding: 8px 15px;
  font-size: 14px;
  border-radius: 0;
  font-weight: normal;
}

.el-dialog__body {
  padding: 0px 20px 20px 20px;
}

.el-button--default,
.el-button--primary,
.el-button--success,
.el-button--warning,
.el-button--danger,
.el-button--info {
  padding: 8px 15px;
  font-size: 14px;
  // border-radius: 3px;
}


.float-botton-form-button-panel {
  position: absolute;
  bottom: 0px;
  padding-left: 228px;
  line-height: 68px;
  background-color: #fff;
  width: 100%;
  z-index: 1000;
}



.el-select .el-tag__close.el-icon-close {
  background-color: #f4f4f5;
  right: -7px;
  top: 0;
}

.el-table-nowwarp .cell {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.el-input.is-disabled .el-input__inner {
  background-color: #F5F7FA;
  border-color: #E4E7ED;
  color: #606266;
  ;
  cursor: not-allowed;
}

.grid-page-top-right-title {
  position: absolute;
  right: 20px;
  top: 31px;
}



.el-switch__label {
  color: #606266;
}

.el-switch__label.is-active {
  color: #606266;
}



.el-tag {
  font-size: 14px;
}

.el-radio-button__orig-radio:disabled+.el-radio-button__inner {
  color: #606266;
}

.disable-class,
.disable-class div {
  color: #b4b4b4;
}

// 表格*号
.table-require::after {
  content: "*";
  color: red;
}

.label_require_before>.label_require_before::before {
  content: "*";
  color: red;
}

.label_require_after:first-child::after {
  content: "*";
  color: red;
}

// 表格内图片展示
.image__preview {
  .el-image {
    margin-left: 10px;
  }
}

.no_select {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard syntax */
}